<template>
	<view class="detail" >
		<view class="title">{{detailData.content}}</view>
		<view class="info">
			<text><uni-dateformat :date="detailData.posttime" format="MM/dd hh:mm:ss"></uni-dateformat></text>
		</view>
		<view class="content">
			<view class="img" v-for="(item,index) in detailData.imageValue" :key="index">
				<image :src="item.url" mode="aspectFill"></image>
			</view>
		</view>
		<view class="btnGroup">
			<button size="mini" type="primary" @click="onEdit"><uni-icons type="compose" size="18"></uni-icons>修改</button>
			<button size="mini" type="warn" @click="onRemove"><uni-icons type="trash" size="18"></uni-icons>删除</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	const db = uniCloud.database();
	const detailData = ref({})
	const id = ref('')
	uni.showLoading()
	// 获取详情
	const getDetail = async () => {
		let artTemp = db.collection('articles').field('content,posttime,imageValue,userid').getTemp()
		let userTemp = db.collection('uni-id-users').field('_id').getTemp()
		db.collection(artTemp, userTemp).where(`_id == "${id.value}"`).get({getOne:true}).then(res => {
			if (!res.result.data) {
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				uni.hideLoading()
				}, 800)
				return
			}
			detailData.value = res.result.data
			uni.hideLoading()
		})
	}
	const apiRemove = async () => {
		db.collection('articles').doc(id.value).remove().then(res=>{
				uni.showToast({
			icon: 'success',
			title: '删除成功'
		})
		getDetail()
		})
	}
	// 删除详情
	const onRemove = () => {
		uni.showModal({
			content: '确认要删除吗?',
			title: "提示",
			success: (res) => {
				if (res.confirm) {
					apiRemove()

				}
			}
		})
	}
	// 修改详情
	const onEdit = () => {
		uni.navigateTo({
			url: '/pages/addNews/index?id=' + id.value + '&type=1'
		})
	}
	onLoad((e) => {
		if(!e.id){
			uni.showToast({
				title:'参数有误',
				icon:'none'
			})
			setTimeout(()=>{
				uni.reLaunch({
					url:'/pages/my/index'
				})
			},800)
			return
		}
		id.value = e.id
		getDetail()
	})
</script>

<style lang="scss" scoped>
	.detail {
		box-sizing: 0;
		padding: 30rpx;

		.title {
			font-size: 50rpx;
			color: #000;
			text-align: justify;
			line-height: 1.4em;
		}

		.info {
			font-size: 30rpx;
			color: #666;
			padding: 30rpx 0 60rpx;
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx 0;

			.text {
				font-size: 30rpx;
				line-height: 1.4em;
			}
		}

		.btnGroup {
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>